{% extends "base_teacher.html" %}
{% block content %}

		<div class="page-header">
			<h1><span class="text-light-gray">问题生成 / </span>简答</h1>
		</div> <!-- / .page-header -->

		<div class="row">
			<div class="col-sm-12">

<!-- 5. $CONTROLS ==================================================================================

				Controls
-->
				<div class="panel">
					<div class="panel-heading">
						<span class="panel-title">Controls</span>
					</div>
                    <form id="org" action="/shortAnswer/file_generation/" enctype="multipart/form-data" method="post" >
					{% csrf_token %}
                        <table class="table" id="inputs-table">
						<thead>

						</thead>
						<tbody>
							<tr>
								<td>
									导入文件
								</td>
								<td>
									 <script>
										init.push(function () {
											$('#styled-finputs-example').pixelFileInput({ placeholder: '请选择文件' });
										})
									</script>
									<!-- / Javascript -->
									<div class="panel">

										<div class="panel-body">
											<input type="file" id="styled-finputs-example" name="file" onchange="handle(this.files)" >
										</div>
									</div>
								</td>
								
							</tr>

							<tr>
								<td>
									内容预览
								</td>
								<td>
									<textarea class="form-control" id="program" rows="3"></textarea>
								</td>
								
							</tr>
							<script type="text/javascript">
								var name1 ;
								
								function handle(files){
						var area = document.getElementById("program");
						if (files.length) {
							var file = files[0];
							// alert(file.name);
							var reader = new FileReader();
							// alert(reader);
							if (/text\/\w+/.test(file.type)) {
								reader.onload = function() {
									text = this.result + "\r\n";
									area.value = this.result + "\r\n";
								}
								reader.readAsText(file);
							}
						}
					}
							</script>

						
							<tr>
								<td>
									重点句数
								</td>
								<td>
									<input type="number" name="num" id="num" min="1" max="20" step="1" value="6">
								</td>
							</tr>
							<tr>
								<td>确认</td>
								<td><button type="submit" onclick="return showWaiting()" class="btn btn-warning btn-rounded">点击生成</button> &nbsp;&nbsp;</td>
							</tr>
						</tbody>
					</table>
                        </form>
				</div>

				<script>
					init.push(function () {
						$('#jq-datatables-example').dataTable();
						$('#jq-datatables-example_wrapper .table-caption').text('生成列表');
						$('.table-footer ').append("<button class='btn btn-success btn-rounded' onclick='saveData()' style='float:right;margin-right:30px;' >&nbsp&nbsp 保存到题库&nbsp&nbsp</button> ");
						$('#jq-datatables-example_wrapper .dataTables_filter input').attr('placeholder', '搜索');
					});

					function saveData() {
                    var data = "";
                    var a = document.getElementsByName("checkQ");
                    for (var i=0; i<a.length;i++){
                        if(a[i].checked){
                            data = data+a[i].value+"/";
                        }
                    }
                    var post_data = {"qg": data};
                    $.ajax({
                        url: '/shortAnswer/question_save/',
                        type: 'POST',
                        dataType: "JSON",
                        data: post_data,
                        traditional:true,
                        success: function(response) {
                            if (response['status']==100){
                                alert("保存成功！");
                                location.href = '/shortAnswer/show_homepage/';
                            }
                            else {
                                alert("异常！");
                                location.href = '/shortAnswer/show_homepage/';
                            }
                            }

                        })
                }
				</script>
				<!-- / Javascript -->

				<div class="panel">
					<div class="panel-heading">
						<span class="panel-title">问题生成系统&And;</span>
					</div>
					<div class="panel-body">
						<div class="table-primary">
							<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="jq-datatables-example">
								<thead>
									<tr>
										<th>序号</th>
										<th>问题</th>
                                        <th>答案</th>
										<th>是否存入题库</th>
									</tr>
								</thead>
								<tbody>
                                {% for exercice in mayanswer %}
									<tr class="odd gradeX">
										<td>{{ forloop.counter }}</td>
										<td>{{ exercice.question }}</td>
                                        <td class="center">{{ exercice.answer }}</td>
										<td>
											<div class="checkbox" style="margin: 0;">
												<label>
													<input type="checkbox" name="checkQ" value="{{ exercice.org }}|{{ exercice.question }}|{{ exercice.answer }}" class="px">
													<span class="lbl">选择</span>
												</label>
											</div> <!-- / .checkbox -->
										</td>
									</tr>
									
                                {% endfor %}
								</tbody>
							</table>
						</div>
					</div>
				</div>
<!-- /5. $CONTROLS -->

			</div>
		</div>
		<div class="row">
			<div class="col-sm-6">

			</div>
		</div>
	</div> <!-- / #content-wrapper -->
	<div id="main-menu-bg"></div>
</div> <!-- / #main-wrapper -->

<!-- Get jQuery from Google CDN -->
<!--[if !IE]> -->
	<script type="text/javascript"> window.jQuery || document.write('<script src="/static/assets/javascripts/jquery.min.js">'+"<"+"/script>"); </script>
<!-- <![endif]-->
<!--[if lte IE 9]>
	<script type="text/javascript"> window.jQuery || document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">'+"<"+"/script>"); </script>
<![endif]-->


<!-- LanderApp's javascripts -->
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/landerapp.min.js"></script>

<script type="text/javascript">
	init.push(function () {
		// Javascript code here
	})
	window.LanderApp.start(init);
</script>


<script>
function closeWaiting() {
    var bgDiv = document.getElementById("bgDiv");
    var msgDiv = document.getElementById("msgDiv");
    //移除背景遮罩层div
    if(bgDiv != null){
        document.body.removeChild(bgDiv);
    }
    //移除中间信息提示层div
    if(msgDiv != null){
        document.body.removeChild(msgDiv);
    }
}
//显示等待窗口
function showWaiting() {
    if($('#styled-finputs-example').val() == ""){
                alert("请先选择文件！");
                return false;
            }

    var msgw, msgh, bordercolor;
    msgw = 300; //提示窗口的宽度
    msgh = 120; //提示窗口的高度
    bordercolor = "#336699"; //提示窗口的边框颜色
    titlecolor = "#99CCFF"; //提示窗口的标题颜色

    var sWidth, sHeight;
    sWidth = document.body.clientWidth;
    sHeight = document.body.clientHeight+10;

    //背景遮罩层div
    var bgObj = document.createElement("div");
    bgObj.setAttribute('id', 'bgDiv');
    bgObj.style.position = "absolute";
    bgObj.style.top = "0px";
    bgObj.style.background = "#888";
    bgObj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
    bgObj.style.opacity = "0.6";
    bgObj.style.left = "0px";
    bgObj.style.width = sWidth + "px";
    bgObj.style.height = sHeight + "px";
    document.body.appendChild(bgObj);

    //信息提示层div
    var msgObj = document.createElement("div");
    msgObj.setAttribute("id", "msgDiv");
    msgObj.setAttribute("align", "center");
    msgObj.style.position = "absolute";
    msgObj.style.background = "white";
    msgObj.style.font = "12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
    msgObj.style.border = "1px solid " + bordercolor;
    msgObj.style.width = msgw + "px";
    msgObj.style.height = msgh + "px";
    msgObj.style.top = (document.documentElement.scrollTop + (sHeight - msgh) / 2) + "px";
    msgObj.style.left = (sWidth - msgw) / 2 + "px";
    document.body.appendChild(msgObj);
   //标题栏
   var title = document.createElement("h4");
   title.setAttribute("id", "msgTitle");
   title.setAttribute("align", "left");
   title.style.margin = "0px";
   title.style.padding = "2px";
   title.style.background = bordercolor;
   title.style.filter = "progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
   title.style.opacity = "0.75";
   title.style.border = "1px solid " + bordercolor;
   title.style.height = "18px";
   title.style.font = "12px Verdana, Geneva, Arial, Helvetica, sans-serif";
   title.style.color = "white";
   title.innerHTML = "正在加载中，请稍候......";
   document.getElementById("msgDiv").appendChild(title);

  //中间等待图标
   var img = document.createElement("img");
   img.style.margin = "10px 0px 10px 0px";
   img.style.width = "48px";
   img.style.height = "48px";
   img.setAttribute("src", "/static/img/waitting.gif");
   document.getElementById("msgDiv").appendChild(img);
}

</script>


{% endblock content %}
